<template>
  <div class="todo">
    <div class="todo-text">{{ todo.content }}</div>
    <div v-if="todo.isFinished">✅</div>
    <button v-else @click="finish(todo.id)">完成</button>
    <button @click="remove(todo.id)">删除</button>
  </div>
</template>
<script setup>
import { useTodoStore } from '../stores/todo-store';

defineProps(['todo'])

const todoStore = useTodoStore()

// 完成显示图标
const finish = (index) =>{
  todoStore.finishTodo(index)
}

// 删除数据
const remove = (index) =>{
  todoStore.removeTodo(index)
}
</script>

<style scoped>
.todo {
  display: flex;
  flex-direction: row;
  border: 1px solid #eee;
  padding: 10px;
}

.todo-text {
  width: 200px;
}
</style>
